<template>
  <a-card :bordered="false">
  <a-row :gutter="24" >
    <a-col :md="14" :sm="24">
        <!-- 左侧面板 -->
        <div class="table-page-search-wrapper">
          <a-form v-show="categoryType=='1'" layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="12">
              <a-col :md="9" :sm="24">
                <a-form-item :label="$t('m.system.dict.other.dictName_dictCode')" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
                  <a-input :placeholder="$t('m.system.dict.other.name_code_placeholder')" v-model="queryParam.dictName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="24">
                <a-form-item :label="$t('m.system.dict.entity.category')" :labelCol="{span: 4}" :wrapperCol="{span: 16, offset: 1}">
                  <a-select v-model="queryParam.category">
                    <a-select-option value="">{{$t('m.common.label.option_select')}}</a-select-option>
                    <a-select-option value="0">{{$t('m.system.dict.other.option_category0')}}</a-select-option>
                    <a-select-option value="1">{{$t('m.system.dict.other.option_category1')}}</a-select-option>
                  </a-select>
                </a-form-item>

              </a-col>
              <a-col :md="8" :sm="24">
                <span  style="text-align:left;display:block;margin-bottom: 20px;">
                  <a-button type="primary" @click="searchQuery" icon="search">{{ $t('m.common.button.query') }}</a-button>
                  <a-button type="default" @click="searchReset" icon="reload" style="margin-left: 4px">{{ $t('m.common.button.reset') }}</a-button>
                </span>
              </a-col>

            </a-row>
          </a-form>

          <div class="table-operator" style="border-top: 5px">
            <a-button @click="handleAdd" type="primary" icon="plus">{{ $t('m.common.button.add') }}</a-button>
            <a-button type="default" icon="download" @click="handleExportXls($t('m.system.dict.other.export_filename'))">{{ $t('m.common.button.export') }}</a-button>
            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
              <a-button type="default" icon="import">{{ $t('m.common.button.import') }}</a-button>
            </a-upload>
            <a-button type="default" icon="hdd" @click="openDeleteList">{{$t('m.system.dict.other.recycle')}}</a-button>
            <a-button type="default" icon="sync" @click="refleshCache()">{{$t('m.system.dict.other.refleshCache')}}</a-button>

          </div>

          <a-table
            ref="table"
            rowKey="id"
            size="middle"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :customRow="clickRow"
            @change="handleTableChange"
            :rowClassName="setRowClassName"
          >
            <template slot="serialNum" slot-scope="text,record,index">
              {{(ipagination.current-1) * ipagination.pageSize + parseInt(index) + 1}}
            </template>
            <span slot="action" slot-scope="text, record" v-if="record.category=='1' ||  record.category=='2'">
              <a @click="handleEdit(record)">
                {{ $t('m.common.button.update') }}
              </a>
              <!--<a-divider type="vertical"/>
              <a @click="editDictItem(record)"><ych-icon type="setting"/> 字典配置</a>-->
              <a-divider type="vertical"/>
              <a-popconfirm :title="$t('m.common.tip.delete_confirm')" @confirm="() =>handleDelete(record.id)">
                <a>{{ $t('m.common.button.delete') }}</a>
              </a-popconfirm>
            </span>
          </a-table>

        </div>
    </a-col>
    <a-col :md="10" :sm="24" style="margin-bottom: 20px">
        <dict-item-list :categoryType="categoryType" ref="dictItemList"></dict-item-list>
        <dict-delete-list :categoryType="categoryType" :groupId="groupId" ref="dictDeleteList" @refresh="() =>loadData()"></dict-delete-list>
        <dict-modal ref="modalForm" :categoryType="categoryType" :groupId="groupId" @ok="modalFormOk"></dict-modal>
    </a-col>
  </a-row>
  </a-card>
</template>

<script>

  import { filterObj } from '@/utils/util';
  import { YcListMixin } from '@/mixins/YcListMixin'
  import DictModal from './modules/DictModal'
  import DictItemList from './DictItemList'
  import DictDeleteList from './DictDeleteList'
  import { getAction } from '@/api/manage'
  import { UI_CACHE_DB_DICT_DATA } from "@/store/mutation-types"
  import Vue from 'vue'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: "DictList",
    mixins:[YcListMixin],
    components: {DictModal, DictItemList,DictDeleteList},
    props: {
      categoryType: {
        type: String,
        default: '1'
      },
      groupId: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        description: '这是数据字典页面',
        visible: false,
        // 查询条件
        queryParam: {
          dictCode: "",
          dictName: "",
          category:"",
          categoryType:this.categoryType,
          groupId:this.groupId
        },
        // 表头
        columns: [
          {
            title:this.$t('m.common.label.number'),
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            scopedSlots: { customRender: 'serialNum' },
          },
          {
            title: this.$t('m.system.dict.entity.dictName'),
            align: "left",
            dataIndex: 'dictName',
          },
          {
            title: this.$t('m.system.dict.entity.dictCode'),
            align: "left",
            dataIndex: 'dictCode',
          },
          {
            title: this.$t('m.system.dict.entity.category'),
            align: "center",
            width: 80,
            dataIndex: 'category',
            customRender:function (text) {
              if(text=='0'){
                return '平台';
              }else if(text=='1'){
                return '公共';
              }else{
                return '应用';
              }
            }
          },
          {
            title: this.$t('m.common.label.operate'),
            dataIndex: 'action',
            width: 150,
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        dict: "",
        labelCol: {
          xs: {span: 8},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 16},
          sm: {span: 19},
        },
        url: {
          list: YchConstant.PREFIX_SYSTEM + "/dict/listOr",
          delete: YchConstant.PREFIX_SYSTEM + "/dict/delete",
          exportXlsUrl: YchConstant.PREFIX_SYSTEM + "/dict/exportExcel",
          importExcelUrl: YchConstant.PREFIX_SYSTEM + "/dict/importExcel?groupId="+this.groupId,
          refleshCache: YchConstant.PREFIX_SYSTEM + "/dict/refleshCache",
          queryAllDictItems: YchConstant.PREFIX_SYSTEM + "/dict/queryAllDictItems",
        },
        record:{}
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`;
      }
    },
    methods: {
      getQueryParams() {
        var param = Object.assign({}, this.queryParam, this.isorter);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        if (this.superQueryParams) {
          param['superQueryParams'] = encodeURI(this.superQueryParams)
          param['superQueryMatchType'] = this.superQueryMatchType
        }
        return filterObj(param);
      },
      //取消选择
      cancelDict() {
        this.dict = "";
        this.visible = false;
        this.loadData();
      },
      //编辑字典数据
      editDictItem(record) {
        this.$refs.dictItemList.edit(record);
      },
      clickRow(record, index){
        return {
          on:{
            click:()=>{
              if(this.record.id !== record.id){
                this.$refs.dictItemList.edit(record);
                this.record = record;
              }
            }
          }
        }
      },
      setRowClassName(record){
        let cls = ''
        if(record.id==this.record.id){
          cls = 'clickRowStyl'
        }
        return cls
      },
      // 重置字典类型搜索框的内容
      searchReset() {
        var that = this;
        that.queryParam.dictName = "";
        that.queryParam.dictCode = "";
        that.queryParam.category = "";
        that.queryParam.categoryType = this.categoryType,
          that.queryParam.groupId = this.groupId
        that.loadData(this.ipagination.current);
      },
      openDeleteList(){
        this.$refs.dictDeleteList.show()
      },
      refleshCache(){
        getAction(this.url.refleshCache).then((res) => {
          if (res.success) {
            //重新加载缓存
            getAction(this.url.queryAllDictItems).then((res) => {
              if (res.success) {
                Vue.ls.remove(UI_CACHE_DB_DICT_DATA)
                Vue.ls.set(UI_CACHE_DB_DICT_DATA, res.result, 7 * 24 * 60 * 60 * 1000)
              }
            })
            this.messageUtil.success(this.$t('m.common.tip.operate_success'));
          }
        }).catch(e=>{
          this.messageUtil.warning(this.$t('m.common.tip.operate_error'));
          //console.log("刷新失败",e)
        })
      },
      modalFormOk(){
        this.loadData(1)
      },
      afterHandleDelete(){
        this.$refs.dictItemList.edit({});
      },
    },
    watch: {
      openKeys(val) {
        //console.log('openKeys', val)
      },
    },
  }
</script>
<style lang="less" scoped>
</style>
